<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C2D1</title>
    <link rel="shortcut icon" type="image/x-icon" href="./img/Icon.ico">
    <link rel="stylesheet" type="text/css" href="./css/No_Copy.css">
    <link rel="stylesheet" type="text/css" href="./css/Demo.css">
    <link rel="stylesheet" type="text/css" href="./css/C2D1.css">
    <link rel="stylesheet" type="text/css" href="./css/TextColor.css">
    <script type="text/javascript" src="./js/Demo.js"></script>
    <script type="text/javascript" src="./js/Browse.js"></script>
    <script type="text/javascript" src="./js/BottomA.js"></script>
    <!-- 嵌入此页面的专属 Js -->
    <script src="./js/C2D1.js"></script>
</head>

<body>
    <!-- 页眉部分 -->
    <div class="top">
        <!-- <h1>第二模块 第 01 单元</h1> -->
        <h1>Web Note</h1>
    </div>
    <!-- ! 页眉部分 End -->

    <!-- 中间部分 -->
    <div class="demo">
        <!-- 第 01 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">前端三层</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box flex-box">
                <div class="w-box-twop">HTML</div>
                <div class="w-box-twop">结构层</div>
                <div class="w-box-sixp">从语义的角度描述页面结构</div>
            </div>
            <div class="da flex-box">
                <div class="w-box-twop">Css</div>
                <div class="w-box-twop">样式层</div>
                <div class="w-box-sixp">从美观的角度秒数页面样式</div>
            </div>
            <div class="da flex-box">
                <div class="w-box-twop">JavaScript</div>
                <div class="w-box-twop">行为层</div>
                <div class="w-box-sixp">从交互的角度描述页面行为</div>
            </div>
        </div>
        <!-- 第 02 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">JavaScript 的应用场景</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">1、网页特效</div>
            <div class="da">2、服务端开发（Node.js）</div>
            <div class="da">3、命令行工具（Node.js）</div>
            <div class="da">4、桌面程序（Electron）</div>
            <div class="da">5、App（Cordova）</div>
            <div class="da">6、控制硬件-物联网（Ruff）</div>
            <div class="da">7、游戏开发（cocos2d-js）</div>
        </div>

        <!-- 第 03 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">JavaScript 是什么</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">JavaScript 是一种运行在客户端的脚本语言，最早是在 HTML(标准通用标记语言下的一个应用) 网页上使用，用来给 HTML
                网页增加动态功能。</div>
            <div class="da r-font-two">浏览器就是一种运行 JavaScript 脚本语言的客户端，JavaScript 的解释器被称为 JavaScript 引擎，是浏览器的一部分。</div>
        </div>

        <!-- 第 04 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">JavaScript 简史</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">在 Web
                日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁的与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的
                Netscape(网景) 公司，决定着手开发一种客户端语言，用来处理这种简单的验证</div>
            <div class="da r-font-two">1995年，就职于 Netscape 公司的 Brendan Eich，开始着手为即将于 1996 年 02 月发布的 Netscape Navigator 2
                浏览器开发一种名为：
                LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发，Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕，Netscape
                为了搭上媒体热炒 Java 的顺风车，临时将 LiveScript 正式改名为 JavaScript。</div>
            <div class="da r-font-two">由于 JavaScript 1.0 获得的关注度越来越高，1996 年微软就在其 Internet Explorer 3 中加入了名为 JScript 的
                JavaScript 实现，这意味着有了两个不同的 JavaScript 版本，导致 JavaScript 没有一个标准化的语法和特性。</div>
            <div class="da r-font-two">1997 年以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA, European Computer
                Manufacturers Association)。该协会指定 39 号技术委员会(TC39, Techical Committee
                #39)负责“标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义。TC39 由来自 Netscape、Sun、微软、Borland 以及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了
                ECMA-262 标准，定义一种名为 ECMAScript 的新脚本语言</div>
        </div>

        <!-- 第 05 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">ECMAScript 发展过程</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box flex-box form-header-box">
                <div class="endition-box w-box-twop text-center">版本</div>
                <div class="time-box w-box-onep text-center">时间</div>
                <div class="explain-box w-box-sevenp text-center">说明</div>
            </div>
            <div class="da flex-box box-mb10">
                <div class="endition-box w-box-twop">ECMAScript 1</div>
                <div class="time-box w-box-onep text-center">1997/06</div>
                <div class="explain-box w-box-sevenp"></div>
            </div>
            <div class="da flex-box box-mb10">
                <div class="endition-box w-box-twop">ECMAScript 2</div>
                <div class="time-box w-box-onep text-center">1998/06</div>
                <div class="explain-box w-box-sevenp"></div>
            </div>
            <div class="da flex-box box-mb10">
                <div class="endition-box w-box-twop">ECMAScript 3</div>
                <div class="time-box w-box-onep text-center">1999/12</div>
                <div class="explain-box w-box-sevenp r-font-two .box-strange">成为 JavaScript 的通行标准，得到了广泛支持</div>
            </div>
            <div class="da flex-box box-mb10">
                <div class="endition-box w-box-twop h-226-center">ECMAScript 4</div>
                <div class="time-box w-box-onep text-center">
                    <div class="h-110-center h110px box-mb10 b-r">2007/10</div>
                    <div class="b-r h-110-center h110px">2008/07</div>
                </div>
                <div class="explain-box w-box-sevenp">
                    <div class="r-font-two h110px box-mb10 box-strange">ECMAScript 4.0 版本草案发布，对 3.0 版做了大幅升级。草案发布后，由于 4.0
                        版本的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以 YaHoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以
                        JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司，则坚持当前的草案。</div>
                    <div class="r-font-two box-strange">由于各种分歧太大，争论过于激进,ECMA 开会决定终止 ECMAScript 4.0
                        的开发，将其中涉及现有功能改善一小部分，发布为
                        ECMAScript 3.1，而将其他激进的设想扩大范围，放入后续版本中，由于会议的气氛，该版本的项目代号起名为 Harmony (和谐)。回后不久，ECMAScript 3.1 就改名为
                        ECMAScript 5。</div>
                </div>
            </div>
            <div class="da flex-box box-mb10">
                <div class="endition-box w-box-twop">ECMAScript 5</div>
                <div class="time-box w-box-onep text-center">2009/12</div>
                <div class="explain-box w-box-sevenp r-font-two box-strange">ECMAScript 5.0 版正式发布。Harmony
                    项目则一分为二，一些较为可行的设想则定名为
                    JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来在做考虑</div>
            </div>
            <div class="da flex-box box-mb10">
                <div class="endition-box w-box-twop">ECMAScript 5.1</div>
                <div class="time-box w-box-onep text-center">2011/06</div>
                <div class="explain-box w-box-sevenp r-font-two box-strange">成为 ISO 国际标准</div>
            </div>
            <div class="da flex-box box-mb10 bb-no">
                <div class="endition-box w-box-twop">
                    <div>ECMAScript 6</div>
                    <div>ECMAScript 2015</div>
                </div>
                <div class="time-box w-box-onep text-center lh64-4">2015/06/17</div>
                <div class="explain-box w-box-sevenp r-font-two lh64-4 box-strange">ECMAScript 6 发布正式版本，并更名为： ECMAScript
                    2015。</div>
            </div>
        </div>

        <!-- 第 06 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">ECMAScript 的应用</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">JavaScript JScript ActionScript 等脚本语言都是基于 ECMAScript 标准实现的。</div>
            <div class="da">在 JavaScript JScript 和 ActionScript 中声明变量，操作数组等语法完全一样，因为他们都是
                ECMAScript。但是在浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。</div>
        </div>

        <!-- 第 07 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">JavaScript 的组成</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">1、ECMAScript</div>
            <div class="da">2、DOM</div>
            <div class="da">3、BOM</div>
            <div class="da">JavaScript由以上三者组成。</div>
        </div>

        <!-- 第 08 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">JavaScript 的书写位置</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">行内书写：</div>
            <div class="da r-font-two">&lt;input type="button" value="按钮" onclick="alert('Hello World')"/&gt;</div>
            <div class="da">内嵌书写：</div>
            <div class="da r-font-two">&lt;script type="text/javascript"&gt;&lt;/script&gt;</div>
            <div class="da">引入脚本：</div>
            <div class="da r-font-two">&lt;script scr="./Js/url.js"&gt;&lt;/script&gt;</div>
            <div class="da c-red">注意：引用外部 Js 文件的 &lt;script&gt; 标签不可以在其内部书写 JavaScript 代码，如需书写，需要另写一个 &lt;script&gt;
                标签，然后再书写。</div>
        </div>

        <!-- 第 09 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">JavaScript 的注释</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">Js 注释分为两种：</div>
            <div class="da r-font-two flex-box">
                <div>1、块级注释 (ctrl + shift + /)</div>
                <div>
                    <div>/* 注释内容</div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;注释内容 */</div>
                </div>
            </div>
            <div class="da r-font-two">2、单行注释(ctrl +
                /)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//注释内容
            </div>
        </div>

        <!-- 第 10 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">alert() 语句</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">alert：警示、警告</div>
            <div class="da c-blue">作用：在浏览器中弹出一个警示框，其内容可以自定义。</div>
            <div class="da r-font-two">alert 语句是一个 Js 内置好的功能（函数、方法），想要实现功能必须在 alert
                关键字后面加小括号执行，自定义的内容需要传递给小括号内的参数，输出时参数位置的内容会出现在弹窗位置。</div>
            <div class="da r-font-two">语法1：alert 语句作为一个函数，如果要执行，必须在后面添加英文输入法下的小括号。</div>
            <div class="da r-font-two">语法2：alert 语句作为一个函数，小括号内部可以传递参数，根据数据类型不同，有不同的语法要求，例如：文字或字符串内容需要写在双（单）引号内。
                书写格式为：alert("A") 或 alert('A')。</div>
            <div class="da r-font-two">语法3：如果需要添加单（双）引号，则必须是成对出现的。</div>
            <div class="da r-font-two">语法4：所有的特殊功能符号均必须为英文输入法状态下输入的符号。</div>
            <div class="da r-font-two">语法5：语句结束后必须书写分号。</div>
            <div class="da r-font-two">语法6：Js 对换行、缩进、空格不敏感。</div>
            <div class="da r-font-two">语法7：如果 Js 中没有特殊控制结构，则代码将以从上到下；从左到右的原则进行执行。</div>
        </div>

        <!-- 第 11 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">prompt() 语句</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">prompt：提示。</div>
            <div class="da c-blue">作用：弹出一个对话框，内部有一个提示语句以及一个输入框，可以在输入框中根据提示任意输入内容。</div>
            <div class="da">prompt 语句也是 Js
                内置的一个功能，必须加小括号执行，有两个参数可以进行传递，每个参数一般都是字符串类型，必须加引号，两个参数之间应用逗号分隔。Ps：此处的引号和逗号均为英文输入法下输入的符号。</div>
        </div>

        <!-- 第 12 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">console</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">1、在大部分浏览器中，都有一个控制台，内部都可以查看 HTML 、css 代码，也可以调试代码错误。</div>
            <div class="da">2、浏览器中右键 → 审查元素（检查） → 弹出控制台</div>
            <div class="da c-green">3、快捷键：F12</div>
            <div class="da">4、控制台中可以看到一个叫做 console（控制台）的选项面板，在 Js 中有着非常重要的作用。</div>
        </div>

        <!-- 第 13 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">console 控制台作用</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box c-orange">1、帮助程序员提示程序中出现的 Bug 。可以提示错误的个数、错误的所在位置、错误类型。</div>
            <div class="da c-orange">2、可以在控制台中直接书写一些语句，进行执行。</div>
            <div class="da c-orange">3、Js 有一个内置对象 console，内部封装了大量的属性和方法（函数），可以通过给 console 对象打点调用方法名()、属性名方式去执行。有一个叫做
                log（日志）方法，可以实现参数位置自定义内容在控制台输出。</div>
            <div class="da c-blue">打印方式：console.log('字符串，文字等'); 或 consloe.log(1); 此处单（双）引号成对出现、且为英文输入法下输入的即可。</div>
        </div>

        <!-- 第 14 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">字面量</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">字面量（literal）是用于表达一个固定值的表示法，又叫常量。</div>
            <div class="da r-font-two">通俗的理解，字面就是所见所得，Js 程序执行到代码中的字面量，会立即知道他是什么类型的数据，值是多少。</div>
            <div class="da r-font-two">可以用于表示固定值，例如：数字、字符串、undefined、布尔类型的字面值等...</div>
            <div class="da">字面量：</div>
            <div class="da r-font-two">数字字面量：0、1、2、3</div>
            <div class="da r-font-two">字符串字面量(Ps：要加双引号)："前端开发"</div>
            <div class="da r-font-two">布尔字面量：true（真）、false（假）</div>
        </div>

        <!-- 第 15 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">数字字面量</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">这里的数字就是数字意义上的数字。</div>
            <div class="da r-font-two">数字字面量区分：整数字面量、浮点数字面量（小数）、特殊值</div>
            <div class="da r-font-two">书写时直接书写字面量，不需要添加任何辅助符号。</div>
            <div class="da c-red">※ 整数的字面量：</div>
            <div class="da r-font-two">整数字面量写法区分进制。</div>
            <div class="da r-font-two">整数可以被表示成十进制（基数为 10）、八进制（基数为 8）、以及十六进制（基数为 16）。</div>
            <div class="da r-font-two c-orange">十进制：是最近笨的数值字面量格式，可以直接在代码中输入。</div>
            <div class="da r-font-two c-orange">八进制：字面值必须前导 0、0O(或 0o)。八进制整数只能包括数字 0 ~ 7。</div>
            <div class="da r-font-two c-orange">十六进制：前缀是 0x 或 0X。后面可以包含数字 0 ~ 9 和字母 A（a）~ F（f）。</div>
            <div class="da r-font-two">在进行计算时或参与程序时，所有的八进制和十六进制的数字都会被转换为十进制。</div>
            <div class="da c-red">※ 浮点数的字面量：</div>
            <div class="da r-font-two">所谓的浮点数就是数学概念中的小数。</div>
            <div class="da r-font-two">浮点数包含：整数、小数、小数部分。</div>
            <div class="da r-font-two">浮点数不区分进制，所有的浮点数都是十进制下的数字。</div>
            <div class="da r-font-two c-blue">※ 注意：如果浮点数是大于 0 小于 1 的，可以省略小数点前面的 0 不写。</div>
            <div class="da c-red">※ Infinty 无穷</div>
            <div class="da r-font-two">Infinty：无穷的意思</div>
            <div class="da r-font-two">由于计算机的计算能力有限，如果高于最大计算值则直接显示未正无穷（Infinity），如果是低于最小计算值则显示为负无穷（-Infinity）。</div>
            <div class="da r-font-two">最小值：Number.MIN_VALUE, 这个值为：5e-324</div>
            <div class="da r-font-two">最小值：Number.MAX_VALUE, 这个值为：1.7976931348623157e + 308</div>
            <div class="da r-font-two">无穷大：Infinity</div>
            <div class="da r-font-two">无穷小：-Infinity</div>
            <div class="da c-red">※ NaN 非正常数字</div>
            <div class="da r-font-two">NaN：not a number 表示不是一个正常的数字，但是还是一个 Number 类型的数字。这个数字没办法用前面的表示方法去表示。</div>
            <div class="da r-font-two">NaN 与任何值都不相等，即便是它本身。</div>
            <div class="da r-font-two">isNaN()：判断一个数据是不是一个 NaN。</div>
        </div>

        <!-- 第 16 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">字符串字面量</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">字符串是由任意个数的有序或无序的字符串组成的，在 Js 中有自己特殊的写法。</div>
            <div class="da r-font-two c-blue">组成：字母、汉字、特殊符号、空白等...</div>
            <div class="da r-font-two">字符串字面量在书写时需要使用单（双）引号，引号内可以有任意数量的字符串，也可以是没有字符串的空字符串。</div>
            <div class="da r-font-two c-blue">注意：字符串中如果包含了双引号，则外部应换为单双引号，反之同理（当然书写中文时用中文输入的单、双引号不与英文输入法的相冲突。）。</div>
            <div class="da c-red">※ 转义符号 \</div>
            <div class="da r-font-two c-orange">字符串中，有一些特殊功能的符号不能被直接书写，还有一些特殊效果也不能直接书写。</div>
            <div class="da r-font-two c-orange">这时，可以使用转义符 \ 对这些字符进行转义。</div>
            <div class="da r-font-two c-orange">在字符串中可以使用转义符 \ 加普通字母，代替一些特殊字符。例如：\n 换行、\t Tab制表</div>
            <div class="da r-font-two c-orange">在字符串中可以使用转义符 \ 将特殊功能字符变为普通字符。例如：\' 单引号、\" 双引号、\\ 反斜杠</div>
        </div>

        <!-- 第 17 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">变量的使用说明</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">变量（variables）是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。</div>
            <div class="da r-font-two">变量相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。</div>
            <div class="da c-red">※ 命名规则和规范</div>
            <div class="da r-font-two">规则：
                <div class="da r-font-two">1、由字母、数字、下划线、$ 符号组成，不能以数字开头。</div>
                <div class="da r-font-two">2、字母区分大小写，例如定义：A，不是定义：a。（不注意的话将会返回null 或 undefined 或 "a" is not defined.）
                </div>
                <div class="da r-font-two">3、不能是关键字和保留字，关键字是指 Js
                    中有特殊功能的单词，譬如：var、if、for等；而保留字指的是现在没有特殊功能，但是将来新语法中可能作为关键字使用。</div>
            </div>
            <div class="da r-font-two">规范：
                <div class="da r-font-two">1、变量名必须有意义。</div>
                <div class="da r-font-two">2、遵循驼峰命名法。多个单词组合而成的，第一个字母小写，后面单词的首字母大写。</div>
                <div class="da r-font-two c-orange">例如：userName、userPassword</div>
            </div>
            <div class="da c-red">※ 变量赋值</div>
            <div class="da r-font-two">变量定义之后，初始时没有进行赋值，内部有一个默认存储值为：undefined(未定义)，表示变量内部未赋值，可以存储数据。</div>
            <div class="da r-font-two">变量赋值的方法：通过等号进行赋值，等号右边的值赋给左边的变量。</div>
            <div class="da r-font-two c-orange">书写时，等号（=）两侧应习惯性书写一个空格。例如var a = 1;（var空格a空格=空格1;）</div>
            <div class="da r-font-two">一个关键字 var 可以同时定义多个变量，并且否负于初始值。多个变量之间用逗号进行分隔，最后一个再用分号进行结尾。</div>
        </div>

        <!-- 第 18 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">数据类型</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two">简单数据类型</div>
            <div class="da m-tb-5px">
                <div class="da flex-box m-tb-5px">
                    <div class="w-box-onep">1、</div>
                    <div class="w-box-threep">Number</div>
                    <div class="w-box-p">数字类型</div>
                </div>
                <div class="da flex-box m-tb-5px">
                    <div class="w-box-onep">2、</div>
                    <div class="w-box-threep">String 类型</div>
                    <div class="w-box-p">字符串类型</div>
                </div>
                <div class="da flex-box m-tb-5px">
                    <div class="w-box-onep">3、</div>
                    <div class="w-box-threep">undefined</div>
                    <div class="w-box-sixp">undefined 类型</div>
                </div>
                <div class="da flex-box m-tb-5px">
                    <div class="w-box-onep">4、</div>
                    <div class="w-box-threep">Boolean</div>
                    <div class="w-box-sixp">布尔类型</div>
                </div>
                <div class="da flex-box m-tb-5px">
                    <div class="w-box-onep">5、</div>
                    <div class="w-box-threep">null</div>
                    <div class="w-box-sixp">null 类型</div>
                </div>
                <div class="da flex-box m-tb-5px">
                    <div class="w-box-onep">6、</div>
                    <div class="w-box-threep">Object 类型</div>
                    <div class="w-box-sixp">对象类型</div>
                </div>
            </div>
            <div class="da c-red m-tb-5px">* 数字类型</div>
            <div class="da r-font-two m-tb-5px">不区分整数、浮点数、特殊值，都是 Number 类型。</div>
            <div class="da c-red m-tb-5px">* String 类型</div>
            <div class="da r-font-two m-tb-5px">所有的字符串都是 String 类型。</div>
            <div class="da c-red m-tb-5px">* Boolean 类型</div>
            <div class="da r-font-two m-tb-5px">其字面量只有 true（1） 和 false（0） 两个字面量的值，必须是全小字母。</div>
            <div class="da c-red m-tb-5px">* Undefined 类型</div>
            <div class="da r-font-two m-tb-5px">undefined 本身就是一个数据，表示未定义。</div>
            <div class="da r-font-two m-tb-5px">在声明变量时只声明变量不为其赋值的时候默认值为 undefined。</div>
            <div class="da c-red m-tb-5px">* Null 类型</div>
            <div class="da r-font-two m-tb-5px">null 本身就是一个数据。</div>
            <div class="da r-font-two m-tb-5px">从逻辑角度，null 值表示一个空对象指针。</div>
            <div class="da r-font-two m-tb-5px">如果定义的变量准备在将来用于保存对象，最好将该变量的初始值写为 null。</div>
        </div>

        <!-- 第 19 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">检测数据类型的方式</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box r-font-two m-tb-5px">使用 typeof 的方法进行数据检测。</div>
            <div class="da r-font-two m-tb-5px">
                <div class="m-tb-5px">检测方式：</div>
                <div class="da r-font-two m-tb-5px">在 typeof 后面加小括号 () 执行，将要检测室数据放在小括号内部。</div>
            </div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 检测方法：</div>
                <div class="da r-font-two m-tb-5px">console.log(typeof(1));</div>
                <div class="da r-font-two m-tb-5px">console.log(typeof("汉字"));</div>
                <div class="da r-font-two m-tb-5px">console.log(typeof(undefined));</div>
                <div class="da r-font-two m-tb-5px">console.log(typeof(true));</div>
                <div class="da r-font-two m-tb-5px">console.log(typeof(false));</div>
                <div class="da r-font-two m-tb-5px ">console.log(typeof(null));</div>
            </div>
            <div class="da m-tb-5px">检测数据类型</div>
            <div class="da m-tb-5px r-font-two">在使用 typeof 时，也可以将 typeof 作为关键字，后面加空格，空格后添加数据的方式，检测数据。</div>
            <div class="da m-tb-5px r-font-two">举个栗砸：console.log(typeof 67);</div>
            <div class="da m-tb-5px">变量的数据类型</div>
            <div class="da m-tb-5px r-font-two">JavaScript 语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化而变化。</div>
            <div class="da m-tb-5px r-font-two">变量的数据类型，与内部的存储数据有关。</div>
            <div class="da m-tb-5px r-font-two">将来使用变量时，需要知道内部存储的数据是什么类型，避免出现 Bug （程序出错）。</div>
        </div>

        <!-- 第 20 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">数据类型的转换</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box m-tb-5px">如何使用：</div>
            <div class="da m-tb-5px r-font-two">字符串类型：黑色</div>
            <div class="da m-tb-5px r-font-two">数值类型：蓝色</div>
            <div class="da m-tb-5px r-font-two">布尔类型：蓝色</div>
            <div class="da m-tb-5px r-font-two">undefined 类型：灰色</div>
            <div class="da m-tb-5px r-font-two">null 类型：灰色</div>
            <!-- 转 字符串 -->
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 转换成字符串类型</div>
            <div class="da m-tb-5px r-font-two">数据.toString() 方法</div>
            <div class="da m-tb-5px r-font-four">String(数据) 方法，因为有些值是没有 数据.toString() 方法的，这个时候就可以使用 String(数据)
                方法了。譬如：undefined 和 null。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="m-tb-5px">// 布尔类型的值可以通过 数据.toString() 方法</div>
                <!-- 此处输出 true 但此时的 true 不是布尔类型 而是字符串类型 -->
                <div class="da r-font-two m-tb-5px">console.log(true.toString());</div>
                <!-- 此处输出 23 但此时的 23 不是数字类型 而是字符串类型  -->
                <!-- ! 数字类型不能使用 数据.toString() 方法的，会报错 -->
                <div class="m-tb-5px">// 数字类型不能使用 数据.toString() 方法的，会报错</div>
                <div class="da r-font-two m-tb-5px">console.log(String(23));</div>
                <div class="da r-font-two m-tb-5px">console.log(String(undefined));</div>
                <div class="da r-font-two m-tb-5px">console.log(String(null));</div>
            </div>
            <!-- 转 数值类型 -->
            <!-- 普遍方法 第一种方法 -->
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 转换成数值类型</div>
            <div class="da m-tb-5px r-font-two c-blue">※ Number(数据) 方法</div>
            <div class="da m-tb-5px r-font-four">转型函数 Number(数据) 方法可以用于任何数据类型，将其他数据转换为数字。</div>
            <div class="da m-tb-5px r-font-four c-orange">字符串：纯数字字符串会被转为相对应的数字，空字符串 或 空白字符串 则会视为 0，非空且非纯数字的字符串会被转换为 NaN。
            </div>
            <div class="da m-tb-5px r-font-four c-orange">布尔值：true 会被转成 1；而 false 则会被转成 0。</div>
            <div class="da m-tb-5px r-font-four c-orange">undefined：会被转换成 NaN。</div>
            <div class="da m-tb-5px r-font-four c-orange">null：会被转换成 0。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="m-tb-5px">// 转换结果为： 1 字符串类型 => 数值类型</div>
                <div class="da r-font-two m-tb-5px">console.log(Number("1"));</div>
                <div class="m-tb-5px">// 转换结果为： 0 空字符串 => 数值类型</div>
                <div class="da r-font-two m-tb-5px">console.log(Number(""));</div>
                <div class="m-tb-5px">// 转换结果为： 0 空白字符串 => 数值类型</div>
                <div class="da r-font-two m-tb-5px">console.log(Number(" "));</div>
                <div class="m-tb-5px">// 转换结果为： NaN 非空且非纯数字的字符串会被转换为 NaN</div>
                <div class="da r-font-two m-tb-5px">console.log(Number("1a"));</div>
                <div class="m-tb-5px">// 转换结果为： NaN Undefined 翻译：未定义的，所以不知道是什么导致转换结果为 NaN</div>
                <div class="da r-font-two m-tb-5px">console.log(Number(undefined));</div>
                <div class="m-tb-5px">// 转换结果为： 0 null 与空字符串类似，属于对象，但是是一个空对象，说明有东西但是是空的，所以视为 0。</div>
                <div class="da r-font-two m-tb-5px">console.log(Number(null);</div>
            </div>
            <!-- 第二种方法 -->
            <div class="da m-tb-5px r-font-four c-blue">※ parseInt() 方法（只针对字符串；其他类型不适用）</div>
            <div class="da m-tb-5px r-font-four c-orange">parselnt() 方法: 字符串转整数方法</div>
            <div class="da m-tb-5px r-font-four c-orange">作用：1、对浮点数进行取整；2、将字符串转换成整数数字。</div>
            <div class="da m-tb-5px r-font-four c-orange">1、对数字取整功能将会直接舍去小数部分，仅仅保留整数。</div>
            <div class="da m-tb-5px r-font-four c-orange">2、将字符串转换成整数数字，在此过程中也会进行取整。</div>
            <div class="da m-tb-5px r-font-four c-orange">字符串中，必须是 纯数字字符串 或 数字字符开头 的字符串，才能转换为正常数字，且只取整数部分，如果不是 数字
                开头的字符串，则会被转换成 NaN。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （整数）数值类型 转换结果为： 3</div>
                <div class="da r-font-two m-tb-5px">console.log(parseInt(3.14));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （整数）数值类型 转换结果为： 3</div>
                <div class="da r-font-two m-tb-5px">console.log(parseInt("3.14"));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （整数）数值类型 转换结果为： 3</div>
                <div class="da r-font-two m-tb-5px">console.log(parseInt("3.14cad"));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （整数）数值类型 转换结果为： NaN （程序出错；原因：不是数字开头的字符串）。</div>
                <div class="da r-font-two m-tb-5px">console.log(parseInt("cad3.14"));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （整数）数值类型 转换结果为： NaN （程序出错；原因：不是数字开头的字符串）。</div>
                <div class="da r-font-two m-tb-5px">console.log(parseInt(""));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （整数）数值类型 转换结果为： NaN （程序出错；原因：不是数字开头的字符串）。</div>
                <div class="da r-font-two m-tb-5px">console.log(parseInt(" "));</div>
            </div>
            <!-- 第三种方法 -->
            <div class="da m-tb-5px r-font-four c-blue">※ parseFloat() 方法（只针对字符串；其他类型不适用）</div>
            <div class="da m-tb-5px r-font-four c-orange">parseFloat() 方法：字符串转浮点数方法。</div>
            <div class="da m-tb-5px r-font-four c-orange">作用：将字符串转化为浮点数数字。</div>
            <div class="da m-tb-5px r-font-four c-orange">要求：满足浮点数数字字符必须在字符串的开头位置，如果在非头部的位置返回值将会是： NaN。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （浮点数）数值类型 转换结果为： 3.14</div>
                <div class="da r-font-two m-tb-5px">console.log(parseFloat(3.14));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （浮点数）数值类型 转换结果为： 3.14</div>
                <div class="da r-font-two m-tb-5px">console.log(parseFloat(3.14cad));</div>
                <div class="m-tb-5px">// 目标：字符串类型 => （浮点数）数值类型 转换结果为： NaN （程序出错；原因：不是数字开头的字符串）</div>
                <div class="da r-font-two m-tb-5px">console.log(parseFloat(cad3.14));</div>
            </div>
            <!-- 转 布尔类型 -->
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 转换成布尔类型</div>
            <div class="da m-tb-5px r-font-two">Boolean(数据) 方法</div>
            <div class="da m-tb-5px r-font-two">转换函数 Boolean() 方法可以用于任何数据类型，将其他数据类型转换为布尔类型的值。</div>
            <div class="da m-tb-5px r-font-two">转化为 false：NaN、0、""（空字符串）、null、undefined。</div>
            <div class="da m-tb-5px r-font-two">转化为 true：非 0 且非 NaN 、非空字符串。</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="m-tb-5px">// 输出结果为：false</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(NaN));</div>
                <div class="m-tb-5px">// 输出结果为：false</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(0));</div>
                <div class="m-tb-5px">// 输出结果为：false 空并不属于字符串</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(""));</div>
                <div class="m-tb-5px">// 输出结果为：false</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(null));</div>
                <div class="m-tb-5px">// 输出结果为：false</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(undefined));</div>
                <div class="m-tb-5px">// 输出结果为：true</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean("undefined"));</div>
                <div class="m-tb-5px">// 输出结果为：true 空白也算字符串</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(" "));</div>
                <div class="m-tb-5px">// 输出结果为：true</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(1));</div>
                <div class="m-tb-5px">// 输出结果为：true</div>
                <div class="da r-font-two m-tb-5px">console.log(Bollean(Infinty));</div>
            </div>
            <!-- 输入内容并转换类型 -->
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 转换输入值的类型</div>
            <div class="da m-tb-5px r-font-two">prompt("提示") 方法 让用户输入指定数据</div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 使用方法：</div>
                <div class="m-tb-5px">// 使用 parseInt 方法使用户输入内容转换为数值类型。</div>
                <div class="da r-font-two m-tb-5px">var userAge = parseInt(prompt("请输入您的年龄"));</div>
                <div class="da r-font-two m-tb-5px">console.log(userAge);</div>
                <div class="m-tb-5px">// 此处打印类型为： number 数值类型</div>
                <div class="da r-font-two m-tb-5px">console.log(userAge);</div>
            </div>
            <!-- 加号拼接字符串的方法 -->
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 加号（+）拼接字符串的方法</div>
            <div class="da m-tb-5px r-font-two">num + "";当加号（+）两边一个操作符是字符串类型，一个是其他类型的时候，会先把其他类型转换成字符串类型再进行字符串的拼接，并返回字符串。
            </div>
            <div class="da r-font-two m-tb-5px code-text p-b-one">
                <div class="m-tb-5px">// 说明：此处输出的是字符串类型，此处的 加号 会变成 连字符 去解释。</div>
                <div class="m-tb-5px">// 原因：在 数字类型 与 字符串类型 相加时将会自动统一转换成字符串类型。</div>
                <div class="m-tb-5px">//
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所以此处的输出值为：11（字符串类型）
                </div>
                <div class="da r-font-two m-tb-5px">console.log(1 + '1');</div>
                <div class="m-tb-5px">// 特殊性：某些情况下可以使用将 加号（+） 当做 连字符 的方式去使用。</div>
                <div class="m-tb-5px">// 非特殊条件下，任何值加上空字符串都将转换为字符串类型。</div>
                <div class="da r-font-two m-tb-5px">console.log(true + ' ');</div>
                <div class="m-tb-5px">// 或是：</div>
                <div class="da r-font-two m-tb-5px">console.log(99 + ' ');</div>
                <div class="m-tb-5px">// 以上两个输出的（true、99）都将为字符串类型。</div>
            </div>
            <div class="da one-box m-tb-5px">操作流程</div>
            <div class="da m-tb-5px r-font-two"></div>
        </div>

        <!-- 第 21 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">操作符的运用 1</div>
            </div>
            <!-- 回答部分 -->
            <div class="da m-tb-5px one-box">操作符，也叫运算符 operator，是 Js 中发起运算的最简单的方式。</div>
            <div class="da m-tb-5px r-font-two">例如：1 + 1</div>
            <div class="da m-tb-5px">表达式（expression）的組成包含操作数和操作符，表达式会得到一个运算结果，然后用结果再去参与程序。</div>
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 运算符号</div>
            <div class="da m-tb-5px r-font-two">加（+）、减（-）、乘（*）、除（/）、取余 Or 取模（%）</div>
            <div class="da m-tb-5px r-font-two">取余（%）：也可以叫做 取模。a / b = c 余数 d；也就是说：a % b = d（取它的余数部分）</div>
            <div class="da m-tb-5px r-font-two">运算顺序：先算乘除、取余 ；再算加减（Ps：有小括号先算小括号内的值）。</div>
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 非正常运算 1</div>
            <div class="da m-tb-5px r-font-two">有特殊值字面量参与的运算。</div>
            <div class="da m-tb-5px r-font-two">NaN 参与的运算，得到的值结果均为 NaN。</div>
            <div class="da m-tb-5px r-font-two">Infinity 参与的运算，视情况而定。</div>
            <div class="da m-tb-5px r-font-two c-blue">※ 工作中并不会使用特殊运算，没有实际应用的意义，但需要进行普及，了解即可。</div>
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 非正常运算 2</div>
            <div class="da m-tb-5px r-font-two">其他类型的数据参与数学运算。</div>
            <div class="da m-tb-5px r-font-two">有字符串参加的加法运算，加号会变为连字符将前后两个数据进行拼接，最终形成一个整体字符串。</div>
            <div class="da m-tb-5px r-font-two c-blue">
                隐式转换：除了字符串参与的加法运算，其他情况下，所有的其他数据类型参与数学运算时，计算机会暗中将其他数据类型先自动转换成数字类型，在参与运算，这个过程中不需要使用 parseInt() 和 Number()
                等方法，过程都是暗中进行的，这就是一个隐式转换的过程。</div>
            <div class="da one-box m-tb-5px c-red font-size-one">&gt;&gt; 隐式转换</div>
            <div class="da m-tb-5px r-font-two">其他的数据类型会隐式转换为数字类型。</div>
            <div class="da m-tb-5px r-font-two">对应数字：纯数字字符串会转为相应的数字。例如："123"（类型：字符串） => 123（类型：数值）</div>
            <div class="da m-tb-5px r-font-two">转换为 1 的：true。</div>
            <div class="da m-tb-5px r-font-two">转换为 0 的：false、null、""（空字符串）、" "（空白字符串）。</div>
            <div class="da m-tb-5px r-font-two">转换为 NaN 的：undefined、非空非纯数字的字符串。</div>
        </div>

        <!-- 第 22 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">操作符的运用 2</div>
            </div>
            <!-- 回答部分 -->
            <!-- ! 比较运算符 -->
            <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; 比较运算符</div>
            <div class="da m-tb-5px flex-box flex-wrap">
                <!-- 第 01 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">&gt;</div>
                    <div class="m-tb-5px w-box-eightp">大于。</div>
                </div>
                <!-- 第 02 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">&lt;</div>
                    <div class="m-tb-5px w-box-eightp">小于。</div>
                </div>
                <!-- 第 03 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">&gt;=</div>
                    <div class="m-tb-5px w-box-eightp">大于等于。</div>
                </div>
                <!-- 第 04 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">&lt;=</div>
                    <div class="m-tb-5px w-box-eightp">小于等于。</div>
                </div>
                <!-- 第 05 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">==</div>
                    <div class="m-tb-5px w-box-eightp">相等，只判断值大小是否相等，不判断数据类型。</div>
                </div>
                <!-- 第 06 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">!=</div>
                    <div class="m-tb-5px w-box-eightp">不等，只判断值大小是否不等，不判断数据类型。</div>
                </div>
                <!-- 第 07 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">===</div>
                    <div class="m-tb-5px w-box-eightp">全等，不仅判断值是否相等，还会去判断数据的数据类型是否相等。</div>
                </div>
                <!-- 第 08 组 -->
                <div class="da flex-box">
                    <div class="m-tb-5px w-box-twop text-center">!==</div>
                    <div class="m-tb-5px w-box-eightp">全不等，不仅判断值是否不等，还会去判断数据的数据类型是否不等。</div>
                </div>
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 非正常比较 1</div>
                <div class="da m-tb-5px r-font-two">特殊值参与比较运算。</div>
                <div class="da m-tb-5px r-font-two">NaN 不等于和不全等于的结果均为 true；而其他的结果则为 false。</div>
                <div class="da m-tb-5px r-font-two">Infinity 参与运算，视情况而定。</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// NaN 比较记录：</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN &gt; 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN &lt; 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN >= 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN &lt;= 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN == 1);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN != 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN === 1);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN !== 1);</div>
                </div>
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 非正常比较 2</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// Infinity 比较记录：</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity &gt; 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity &lt; 1);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity >= 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity &lt;= 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity == 1);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity != 1);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity === 1);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity !== 1);</div>
                    <div class="m-tb-5px">// 转换结果为： true 特殊（在 Js 中内定）</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity == Infinity);</div>
                    <div class="m-tb-5px">// 转换结果为： true 特殊（在 Js 中内定）</div>
                    <div class="da r-font-two m-tb-5px">console.log(Infinity === Infinity);</div>
                </div>
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 非正常比较 3</div>
                <div class="da m-tb-5px r-font-two">其他数据类型参与比较运算（此处排除 字符串 与 字符串 的比较）。</div>
                <div class="da m-tb-5px r-font-two">其他数据类型也会被隐式转换为数字参与比较运算。</div>
                <div class="da m-tb-5px r-font-four">例01："123" => 123</div>
                <div class="da m-tb-5px r-font-four">例02：true => 1</div>
                <div class="da m-tb-5px r-font-four">例03：false => 0</div>
                <div class="da m-tb-5px r-font-four">例04：undefined => null</div>
                <div class="da m-tb-5px r-font-four">例05："" => 0</div>
                <div class="da m-tb-5px r-font-four">例06：" " => 0</div>
                <div class="da m-tb-5px r-font-four">例06："abc" => NaN</div>
                <div class="da m-tb-5px r-font-two">null 的判断比较特殊，在 null 与 0 进行判断时，相等会判断为 false，&gt;= 和 &lt;= 判断为 true。
                </div>
                <div class="da m-tb-5px r-font-two">null == undefined</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// 数字与字符串记录：（排除字符串与字符串比较）</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(1 == "1");</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(1 == true);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(0 == false);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(0 == "");</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(0 == " ");</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(0 == undefined);</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log(0 == null);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(1 &gt; null);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(0 &gt;= null);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(1 &lt;= null);</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(undefined == null);</div>
                </div>
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 非正常比较 4</div>
                <div class="da m-tb-5px r-font-two">字符串与字符串比较。</div>
                <div class="da m-tb-5px r-font-two">不会发生隐式转换为数字的情况；若进行比较，则比较两个字符串的 Unicode 编码的排列顺序。</div>
                <div class="da m-tb-5px r-font-two">字符编码顺序：从前往后；0 ~ 9、A ~ Z、a ~ z；前面的小于后面的。</div>
                <div class="da m-tb-5px r-font-two">比较时，不关心两个字符串的长度，从第一个字符开始比计较，若相等则顺势依次往后顺，直到比出大小，就不必再往后比较了。</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// 字符串 比较 字符串 的记录：</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log(1 &lt; "2");</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log("1" &lt; "2");</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log("A" &lt; "2");</div>
                    <div class="m-tb-5px">// 转换结果为： true</div>
                    <div class="da r-font-two m-tb-5px">console.log("A" &lt; "a");</div>
                    <div class="m-tb-5px">// 转换结果为： false</div>
                    <div class="da r-font-two m-tb-5px">console.log("button" &lt; "bottom");</div>
                    <div class="m-tb-5px">// 转换结果为： 1</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN != 1);</div>
                    <div class="m-tb-5px">// 转换结果为： 1</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN === 1);</div>
                    <div class="m-tb-5px">// 转换结果为： 1</div>
                    <div class="da r-font-two m-tb-5px">console.log(NaN !== 1);</div>
                </div>
                <!-- ! 比较运算符 结束 -->
                <!-- ! 比较顺序 -->
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 比较顺序</div>
                <div class="da m-tb-5px r-font-two">从前往后进行比较，前面的得出答案以后再去比较后面的。</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// 比较顺序记录：</div>
                    <div class="m-tb-5px">// 比较值的结果：false</div>
                    <div class="m-tb-5px">// 原因：3 大于 2 首先得到是 true 的值；而后面所剩的 1 则会去用 true 去比较；所以是 true 大于 1；但在布尔类型里 true
                        等于
                        1；故1 并不大于 1。所以为 false。</div>
                    <div class="da r-font-two m-tb-5px">console.log(3 &gt; 2 &gt; 1);</div>
                </div>
                <!-- ! 比较顺序 结束 -->
                <!-- ! 逻辑运算符 -->
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 逻辑运算符</div>
                <div class="da m-tb-5px r-font-two">逻辑运算符常用于布尔类型之间；当操作数都是布尔值时，返回值也是布尔值。</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">使用说明：</div>
                    <div class="m-tb-5px">// &&
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;逻辑与运算符；且
                    </div>
                    <div class="m-tb-5px">// ||
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;逻辑或运算符
                    </div>
                    <div class="m-tb-5px">// !
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;逻辑非运算符
                    </div>
                    <div class="m-tb-5px">// 使用方法：</div>
                    <div class="m-tb-5px">// 逻辑与：判断值都“真”结果才为“真”；但有“假”则结果就是“假”。</div>
                    <div class="m-tb-5px">// 逻辑或：判断值只要有“真”结果就为“真”的。只有全是“假”的结果才为“假”的</div>
                    <div class="m-tb-5px">// 逻辑非：非“真”则“假”；非“假”则“真”</div>
                    <div class="da r-font-two m-tb-5px">console.log(!true); // 结果则为 false</div>
                </div>
                <!-- 隐式转换 -->
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 逻辑运算符的隐式转换</div>
                <div class="da m-tb-5px r-font-two">逻辑运算符常用于布尔类型之间；当操作数都是布尔值时，返回值也是布尔值。</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">转换规律：</div>
                    <div class="m-tb-5px">true：非0、非NaN、非空字符串</div>
                    <div class="m-tb-5px">false：NaN、0、""（空字符串）、null、undefined</div>
                    <div class="m-tb-5px">逻辑与：(a && b) 如果 a 被转换为 false，那么返回 a ；否则返回 b 。</div>
                    <div class="m-tb-5px">逻辑或：(a || b) 如果 a 被转换为 true，那么返回 a ；否则返回 b 。</div>
                </div>
                <!-- ! 比较顺序 结束 -->
            </div>

            <!-- 第 23 组 -->
            <div class="demo-box">
                <!-- 提问部分 -->
                <div class="wen">
                    <!-- 序号 -->
                    <div class="num">Null</div>
                    <!-- 问题 -->
                    <div class="text-box">操作符的运用 3</div>
                </div>
                <!-- 回答部分 -->
                <!-- * 赋值运算符 开始 -->
                <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; 赋值运算符</div>
                <div class="da m-tb-5px r-font-two">赋值运算符必须有变量参与运算。</div>
                <div class="da m-tb-5px r-font-four">1、将变量中原始值参与对应数学运算，与右侧的数据。</div>
                <div class="da m-tb-5px r-font-four">2、将运算结果再重新赋值给变量。</div>
                <div class="da m-tb-5px r-font-two">变量位于操作符的左侧。</div>
                <!-- ! 赋值运算符 结束 -->

                <!-- * 一元运算符 开始 -->
                <div class="da m-tb-5px c-red font-size-one">&gt;&gt; 一元运算符</div>
                <div class="da m-tb-5px r-font-two">++ 和 -- 也叫一元运算符，只有一个操作数。</div>
                <div class="da m-tb-5px r-font-two">++ 或 -- 符号也可以写在变量前面和变量后面，但位置不同可能导致的程序运行结果不同。</div>
                <div class="da m-tb-5px r-font-two">例子：</div>
                <div class="da m-tb-5px r-font-four">a++：++ 符号在变量后面时，a++ 参与程序过程中使用的原始没有加 1 的值，使用完后第二次使用变量 a 时，a 则是加 1
                    后的新值。这就是先参与，后递加。</div>
                <div class="da m-tb-5px r-font-four">++a：++ 符号在变量前面时，++a 参与程序过程中使用的是 a 加完 1 之后的新值，使用完再次使用 a 变量时，a 用的也是加完
                    1
                    后的新值。这就是先递增，再参与。</div>
                <!-- ! 一元运算符 结束 -->
            </div>

            <!-- 第 24 组 -->
            <div class="demo-box">
                <!-- 提问部分 -->
                <div class="wen">
                    <!-- 序号 -->
                    <div class="num">Null</div>
                    <!-- 问题 -->
                    <div class="text-box">操作符的运用 4</div>
                </div>
                <!-- 回答部分 -->
                <!-- * 运算优先级 开始 -->
                <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; 运算优先级</div>
                <div class="da m-tb-5px r-font-two">运算优先级也可叫做 总合运算顺序。</div>
                <div class="da m-tb-5px r-font-two">1、将变量中原始值参与对应数学运算，与右侧的数据。</div>
                <div class="da m-tb-5px r-font-two">变量位于操作符的左侧。</div>
                <div class="da m-tb-5px r-font-four">1、() 优先级最高。</div>
                <div class="da m-tb-5px r-font-four">2、一元运算符 ++ -- !。</div>
                <div class="da m-tb-5px r-font-four">3、算数运算符先 *（乘） /（除） %（取余）；后 +（加） -（减）。</div>
                <div class="da m-tb-5px r-font-four">4、关系运算符 &gt;（大于） &lt;（小于）&gt;=（大于等于） &lt;（小于等于） 。</div>
                <div class="da m-tb-5px r-font-four">5、相等运算符 ==（相等） !=（非相等） ===（全等） !==（全不等）。</div>
                <div class="da m-tb-5px r-font-four">6、逻辑运算符 先 &&；后 ||。</div>
                <div class="da m-tb-5px r-font-four">7、赋值运算符。</div>
                <!-- ! 运算优先级 结束 -->
            </div>

            <!-- 第 25 组 -->
            <div class="demo-box">
                <!-- 提问部分 -->
                <div class="wen">
                    <!-- 序号 -->
                    <div class="num">Null</div>
                    <!-- 问题 -->
                    <div class="text-box">操作符的运用 5</div>
                </div>
                <!-- 回答部分 -->
                <!-- * 表达式和语句 开始 -->
                <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; 表达式和语句</div>
                <div class="da m-tb-5px r-font-two">
                    <span id="oSpanColorOne">表达式：</span>
                    一个表达式可以产生一个值，有可能是运算、函数调用、也有可能是字面量。表达式可以放在任何需要值的地方。
                </div>
                <div class="da m-tb-5px r-font-two">
                    <span id="oSpanColorTwo">语&nbsp;&nbsp;&nbsp;&nbsp;句：</span>
                    语句可以理解为一个行为，循环语句和判断语句就是最典型的语句。一个程序有很多个语句组成，一般情况下会使用分号区分割一个又一个的语句。
                </div>
                <div class="da m-tb-5px r-font-two">语句可以认为是给计算机的一个指令，执行这段代码。</div>
                <div class="da m-tb-5px r-font-two" id="oDivColorOne">※ 注意：一般语句以分号结束，但特殊结构除外。</div>
                <!-- ! 表达式和语句 结束 -->
            </div>

            <!-- 第 26 组 -->
            <div class="demo-box">
                <!-- 提问部分 -->
                <div class="wen">
                    <!-- 序号 -->
                    <div class="num">Null</div>
                    <!-- 问题 -->
                    <div class="text-box">条件分支语句</div>
                </div>
                <!-- 回答部分 -->
                <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; if 语句</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// 使用方法：</div>
                    <div class="m-tb-5px">// If 语句是最常用的条件分支语句，作用就是通过某个指定的判断条件，决定去走哪一个分支代码。</div>
                    <div class="m-tb-5px">// 条件表达式：condition expression；可以是任意的代码或是表达式，参与程序过程都会强制得到一个布尔值的执行结果。表达式，Js
                        中遇到任何表达式都会先计算出一个结果然后才能继续参与程序。</div>
                    <div class="m-tb-5px">// 结构体：。</div>
                    <div class="m-tb-5px">// 结构：statement；Js
                        中可以用大括号括入一到多行的语句，这些语句整体组成了一个结构体，结构体中的语句根据表达式产生的结果；要执行就执行，要不执行就不执行。</div>
                    <div class="m-tb-5px">// if 如果；else 否则</div>
                    <div class="da r-font-two m-tb-5px">if( 条件表达式 ){</div>
                    <div class="da r-font-four m-tb-5px">结构体1;</div>
                    <div class="da r-font-two m-tb-5px">} else{</div>
                    <div class="da r-font-four m-tb-5px">结构体2;</div>
                    <div class="da r-font-two m-tb-5px">}</div>
                    <div class="m-tb-5px">// 总结：如果条件为“真（true）”；则执行结构体 1 的代码段；否则执行结构体 2 的代码段。</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// 注意：如果结构体是单行语句，则可以省略大括号。不建议使用！<br />如下：</div>
                    <div class="da r-font-two m-tb-5px">if( 条件表达式 )</div>
                    <div class="da r-font-four m-tb-5px">结构体1;</div>
                    <div class="da r-font-two m-tb-5px">else</div>
                    <div class="da r-font-four m-tb-5px">结构体2;</div>
                    <div class="m-tb-5px">// 注意事项：</div>
                    <div class="m-tb-5px">// if 语句可以实现选择功能，两个分支可以选择一个执行（不会两个都执行）。</div>
                    <div class="m-tb-5px">// if 语句可以不写 else 分支，表示条件成立后就执行后面的结构，如果不成立则直接跳过。</div>
                    <div class="m-tb-5px">// if 语句能够控制自己内部的流程，但不理论走哪一个分支，结束以后都要继续执行 if 语句后面的其他语句，这种现象称为：殊途同归现象。</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// 多分支 if 语句</div>
                    <div class="m-tb-5px">// 如果...否则如果...否则如果...否则</div>
                    <div class="da r-font-two m-tb-5px">if( 条件表达式 1 ) {</div>
                    <div class="da r-font-four m-tb-5px">结构体1;</div>
                    <div class="da r-font-two m-tb-5px">} else if( 条件表达式 2 ) {</div>
                    <div class="da r-font-four m-tb-5px">结构体2;</div>
                    <div class="da r-font-two m-tb-5px">} else {</div>
                    <div class="da r-font-four m-tb-5px">结构体3;</div>
                    <div class="da r-font-two m-tb-5px">} else if( 条件表达式 3 ) {</div>
                    <div class="da r-font-four m-tb-5px">结构体4;</div>
                    <div class="da r-font-two m-tb-5px">}</div>
                    <div class="m-tb-5px">// 注意事项：</div>
                    <div class="m-tb-5px">// 1、多分支 if 语句中可以有多个 else if 的分支，但只能有一个 else 分支，且该分支必须出现在最后面，作为备用的选项。而且 else
                        也可以省略不写，表示前面条件如果都不满足，则直接跳出 if 不走任何分支。</div>
                    <div class="m-tb-5px">// 2、多分支 if 语句有跳楼现象：条件从上往下一次验证，如果满足了某一个条件，则会被立即执行里面的代码块，执行完后直接跳出 if
                        就不会再往下继续验证其他的条件了，这就是所谓的 跳楼现象。</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// if 语句的嵌套</div>
                    <div class="m-tb-5px">// if 语句的结构体部分，代码可以是任意代码包括它自身。</div>
                    <div class="m-tb-5px">// if 语句内是可以再次嵌套 if 语句的。</div>
                    <div class="m-tb-5px">// 如果想执行内部 if 语句的某个分支，则必须满足外部的 if 语句的条件，同时还要满足内部自身的某一个条件。</div>
                    <div class="m-tb-5px">优点：可以简化多分支 if 语句。</div>
                </div>
            </div>

            <!-- 第 27 组 -->
            <div class="demo-box">
                <!-- 提问部分 -->
                <div class="wen">
                    <!-- 序号 -->
                    <div class="num">Null</div>
                    <!-- 问题 -->
                    <div class="text-box">三元表达式</div>
                </div>
                <!-- 回答部分 -->
                <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; 三元表达式</div>
                <div class="da r-font-two">三元表达式又称 三元运算符；必须有三个操作数参与的运算才能被称为三元运算。</div>
                <div class="da r-font-two">操作符号为： ?: 。</div>
                <div class="da r-font-two">表达式：参与 Js 程序时，都必须先计算出表达式的结果，才能参与后续程序。</div>
                <div class="da r-font-two">由于三元表达式具备了一些选择效果，所以也是一种条件分支语句。</div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// 使用方法：</div>
                    <div class="da r-font-two m-tb-5px">boolean_expression ? true_value : false_value;</div>
                    <div class="da r-font-two m-tb-5px">布尔表达式 ? “真” : “假”;</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">boolean_expression：布尔表达式，表达式在参与三元运算中必须求得一个布尔类型的值，依据结果的true Or false
                        作为判断，得出到底执行前面的值还是后面的值。</div>
                    <div class="m-tb-5px">true_value：布尔表达式的值为 true（真）的时候，该三元表达式的结果。</div>
                    <div class="m-tb-5px">false_value：布尔表达式的值为 false（假）的时候，该三元表达式的结果。</div>
                    <div class="m-tb-5px">作用：根据布尔表达式的结果，去判断，若为 true（真） 则三元表达式的结果也是 true（真） ，若为 false（假） 则三元表达式的结果也是
                        false（假）
                        。</div>
                    <div class="da r-font-two m-tb-5px">var a = true ? 1:0; // 输出结果为 1</div>
                </div>
            </div>

            <!-- 第 28 组 -->
            <div class="demo-box">
                <!-- 提问部分 -->
                <div class="wen">
                    <!-- 序号 -->
                    <div class="num">Null</div>
                    <!-- 问题 -->
                    <div class="text-box">条件分支语句</div>
                </div>
                <!-- 回答部分 -->
                <div class="da m-tb-5px one-box c-red font-size-one">&gt;&gt; switch 语句</div>
                <div class="da r-font-two">开关语句允许一个程序求一个表达式的值，并尝试去匹配每一个表达式的值，到一个 case 标签，如果成功匹配，这个程序执行相关语句。</div>
                <div class="da r-font-two"></div>
                <div class="da r-font-two m-tb-5px code-text p-b-one">
                    <div class="m-tb-5px">// 使用方法：</div>
                    <div class="da r-font-two m-tb-5px">switch(表达式){</div>
                    <div class="da r-font-four m-tb-5px">case 01:</div>
                    <div class="da r-font-six m-tb-5px">结构体 01;</div>
                    <div class="da r-font-six m-tb-5px">break;</div>
                    <div class="da r-font-four m-tb-5px">case 02:</div>
                    <div class="da r-font-six m-tb-5px">结构体 01;</div>
                    <div class="da r-font-six m-tb-5px">break;</div>
                    <div class="da r-font-four m-tb-5px">... :</div>
                    <div class="da r-font-six m-tb-5px">... ;</div>
                    <div class="da r-font-six m-tb-5px">... ;</div>
                    <div class="da r-font-four m-tb-5px">default:</div>
                    <div class="da r-font-six m-tb-5px">结构体 N;</div>
                    <div class="da r-font-six m-tb-5px">break;</div>
                    <div class="da r-font-two m-tb-5px">}</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// switch 语句 & 结构解析</div>
                    <div class="m-tb-5px">// switch：关键字表示开始进入一个开关语句。</div>
                    <div class="m-tb-5px">// 表达式：会求出一个具体的值，将这个值去与大括号内部的 case
                        后面的值去进行对比与匹配，如果纸箱等表示匹配成功。匹配成功时，方式是进行全等于匹配，不止值要相等，数据类型也要一致。</div>
                    <div class="m-tb-5px">// case：（示例），作为关键字后面必须跟着一个空格，书写匹配的值。（※ 注意：case 后面的结构体：每个 case 匹配成功之后都要执行的语句）。
                    </div>
                    <div class="m-tb-5px">// break：用于打断结构体，直接跳出程序。</div>
                    <div class="m-tb-5px">// default：相当于 if 语句中的 else，否则的情况，如果前面的 case 都不匹配，将会默认执行 default 后面的语句。</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// switch 语句的运行机制。</div>
                    <div class="m-tb-5px">// switch 语句首先会将小括号内的表达式计算出一个结果，用结果去匹配结构体内部的 case。</div>
                    <div class="m-tb-5px">// 从上往下进行匹配，如果匹配成功，会立即执行这个 case 后面的语句，直到遇到一个 break，然后跳出整个 switch 语句。</div>
                    <div class="m-tb-5px">// 如果前面的 case 没有匹配成功，则会跳过 case 内部的语句，再去匹配下一个 case，直到匹配成功，或是匹配最终的 default 内的语句。
                    </div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// switch 的注意事项。</div>
                    <div class="m-tb-5px">// switch 中的 default 可以不写，相当于 if 语句中没有书写 else。</div>
                    <div class="m-tb-5px">// break 关键字：根据结构需要去书写，在 case 中书写 break 纯属为了防止出现跳楼现象，执行完后继续执行下面的其他语句，而书写 break
                        可以很好的防止这种现象的发生，执行完后将直接跳出整个 switch 语句（不写 break 则不会跳出结构体，会陆续执行其他 case 的后面语句，直到遇到 break 或是执行结束）。
                    </div>
                    <div class="m-tb-5px">// 当然也可以去利用 break 不写的特殊属性去制作一些特殊的案例。</div>
                    <div class="m-tb-5px">&nbsp;</div>
                    <div class="m-tb-5px">// 条件分支语句总结。</div>
                    <div class="m-tb-5px">// 实际工作中使用三种语句的场景。</div>
                    <div class="m-tb-5px">// if 语句:是最常用的语句，所有的判断情况都能够去书写。</div>
                    <div class="m-tb-5px">// 三元表达式：多用于给一些变量赋值根据条件二选一的情况。</div>
                    <div class="m-tb-5px">// switch 语句：多用于给一个表达式去匹配多种固定值可能形的情况。</div>
                </div>
            </div>
        </div>
        <!-- ! 中间部分 End -->

        <!-- 页脚部分 -->
        <div class="bootom">
            <div class="title-bottom">
                <span>友情链接</span>
            </div>
            <div class="text-box">
                <div class="text-one content-box">
                    <p>内部链接</p>
                    <a href="javascript:void(0);" onclick="oTiao(1, 1)">网站首页</a>
                    <a href="javascript:void(0);" onclick="oTiao(1, 2)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(1, 3)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(1, 4)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(1, 5)">text</a>
                </div>
                <div class="text-two content-box">
                    <p>外部链接</p>
                    <a href="javascript:void(0);" onclick="oTiao(2, 1)">百度</a>
                    <a href="javascript:void(0);" onclick="oTiao(2, 2)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(2, 3)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(2, 4)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(2, 5)">text</a>
                </div>
                <div class="text-three content-box">
                    <p>快捷组件</p>
                    <a href="javascript:void(0);" onclick="oTiao(3, 1)">Bootstrap</a>
                    <a href="javascript:void(0);" onclick="oTiao(3, 2)">Less</a>
                    <a href="javascript:void(0);" onclick="oTiao(3, 3)">Animate</a>
                    <a href="javascript:void(0);" onclick="oTiao(3, 4)">text</a>
                    <a href="javascript:void(0);" onclick="oTiao(3, 5)">text</a>
                </div>
            </div>
            <div class="statement-box">
                作者：<a href="javascript:void(0);">苏常青</a>
                创建于：2022年01月31日 月曜日
                联系方式：<a href="javascript:void(0);">2244915205</a>
            </div>
        </div>
        <!-- ! 页脚部分 End -->

</body>

</html>